<template>
    <el-descriptions title="用户信息" :column="1" border>
        <el-descriptions-item label="用户名">
            <el-tooltip class="item" effect="dark" :content="user.name" placement="top">
                <span class="ellipsis">{{ user.name }}</span>
            </el-tooltip>
        </el-descriptions-item>

        <el-descriptions-item label="邮箱">
            <el-tooltip class="item" effect="dark" :content="user.email" placement="top">
                <span class="ellipsis">{{ user.email }}</span>
            </el-tooltip>
        </el-descriptions-item>

        <el-descriptions-item label="地址">
            <el-tooltip class="item" effect="dark" :content="user.address" placement="top">
                <span class="ellipsis">{{ user.address }}</span>
            </el-tooltip>
        </el-descriptions-item>
    </el-descriptions>
</template>

<script setup lang="ts">
import { reactive } from 'vue'

const user = reactive({
    name: '张三丰超级长的用户名示例，超过显示宽度会省略',
    email: 'zhangsan@example.com',
    address: '北京市朝阳区某某路123号，详细地址内容非常长，需要省略显示'
})
</script>

<style scoped>
.ellipsis {
    display: inline-block;
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    cursor: pointer;
}
</style>
